<template>
	<view class="timelineItem">
		<view class="timeItem">
			<view class="leftTime">
				<view class="day">
					{{day}}
				</view>
				<view class="month">
					{{month}}月
				</view>
			</view>
			<view class="line">
				<view class="out" :style="{background: color == '' ? '' : color}">
					<view class="inner" :style="{background: color == '' ? '' : color}"></view>
				</view>
			</view>
			<view class="rightContent">
				<slot></slot>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			leftTime: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			}
		},
		computed: {
			monDay() {
				let tmp = this.leftTime.split('月');
				this.day = tmp[1];
				this.month = tmp[0];
			}
		},
		data() {
			return {
				day: '',
				month: ''
			}
		}
	}
</script>

<style scoped lang="less">
	.timelineItem {
		.timeItem {
			display: flex;

			.leftTime {
				margin-top: -10*2upx;
				// width: 135rpx;
				padding: 0 10rpx;
				font-size: 22rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-right: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: right;
				.day {
					font-size:44upx;
					font-family:PingFangSC-Semibold,PingFang SC;
					font-weight:600;
					color:rgba(49,49,49,1);
				}
				.month {
					font-size:24upx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(49,49,49,1);
					margin-top: 5upx;
				}
			}

			.line {
				width: 2upx;
				background: #F6F6F6;
				position: relative;
				// margin: 10upx 0;
				.out {
					// margin: 10upx 0;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 18rpx;
					height: 18rpx;
					background: rgba(0, 117, 255, 1);
					border-radius: 50%;
					// .inner {
					// 	width: 18rpx;
					// 	height: 18rpx;
					// 	background : rgba(0,117,255,1);
					// 	border-radius: 50%;
					// }
				}
			}

			.rightContent {
				flex: 1;
				padding: 0 10rpx 0;
				margin-left: 20rpx;
				min-height: 50rpx;
			}
		}
	}
</style>
